window.onload = function () {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  const resetButton = document.getElementById("resetButton");
  let mousedown = {},
    rubberbandRectangle = {};
  dragging = false;
  let imageData;
  imageDataCopy = context.createImageData(canvas.width, canvas.height);
  const image = new Image();

  function drawImage() {
    const w = canvas.width,
      h = canvas.height;
    context.clearRect(0, 0, w, h);
    context.drawImage(image, 0, 0, w, h);
  }

  function windowToCanvas(x, y) {
    var canvasBox = canvas.getBoundingClientRect();
    return {
      x: x - canvasBox.left,
      y: y - canvasBox.top,
    };
  }

  function rubberbandStart(x, y) {
    mousedown.x = x;
    mousedown.y = y;
    rubberbandRectangle.left = x;
    rubberbandRectangle.top = y;
    dragging = true;
  }

  function setRubberbandRectangle(x, y) {
    rubberbandRectangle.left = Math.min(x, mousedown.x);
    rubberbandRectangle.top = Math.min(y, mousedown.y);
    rubberbandRectangle.width = Math.abs(x - mousedown.x);
    rubberbandRectangle.height = Math.abs(y - mousedown.y);
  }
  function copyCanvasPixels() {
    for (let i = 0; i < imageData.data.length - 1; i = i + 4) {
      imageDataCopy.data[i] = imageData.data[i];
      imageDataCopy.data[i + 1] = imageData.data[i + 1];
      imageDataCopy.data[i + 2] = imageData.data[i + 2];
      imageDataCopy.data[i + 3] = imageData.data[i + 3] / 2;
    }

    console.log(imageData.data);
  }
  function captureCanvasPixels() {
    imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    copyCanvasPixels();
  }
  function drawRubberband() {
    context.strokeRect(
      rubberbandRectangle.left + context.lineWidth,
      rubberbandRectangle.top + context.lineWidth,
      rubberbandRectangle.width - 2 * context.lineWidth,
      rubberbandRectangle.height - 2 * context.lineWidth
    );
  }
  function updateRubberband() {
    drawRubberband();
  }
  function restoreRubberbandPixels() {
    // 重新绘制图像，用以覆盖之前绘制的矩形框
    context.putImageData(imageData, 0, 0);
    // 绘制带透明度的那部分
    context.putImageData(
      imageDataCopy,
      0,
      0,
      rubberbandRectangle.left,
      rubberbandRectangle.top,
      rubberbandRectangle.width,
      rubberbandRectangle.height
    );
  }
  function rubberbandStretch(x, y) {
    if (
      rubberbandRectangle.width > 2 * context.lineWidth &&
      rubberbandRectangle.height > 2 * context.lineWidth
    ) {
      if (imageData !== undefined) {
        restoreRubberbandPixels();
      }
    }

    setRubberbandRectangle(x, y);

    if (
      rubberbandRectangle.width > 2 * context.lineWidth &&
      rubberbandRectangle.height > 2 * context.lineWidth
    ) {
      updateRubberband();
    }
  }

  function rubberbandEnd() {
    // 二者选其一都可以
    // context.drawImage(image, 0, 0, canvas.width, canvas.height);
    context.putImageData(imageData, 0, 0);
    context.drawImage(
      canvas,
      rubberbandRectangle.left + context.lineWidth * 2,
      rubberbandRectangle.top + context.lineWidth * 2,
      rubberbandRectangle.width - 4 * context.lineWidth,
      rubberbandRectangle.height - 4 * context.lineWidth,
      0,
      0,
      canvas.width,
      canvas.height
    );

    dragging = false;
    imageData = undefined;
  }

  image.src = "./imgs/7.jpeg";
  image.onload = function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawImage();
  };

  context.strokeStyle = "navy";
  context.lineWidth = 1;

  canvas.onmousedown = function (e) {
    var loc = windowToCanvas(e.clientX, e.clientY);
    e.preventDefault();
    rubberbandStart(loc.x, loc.y);
    captureCanvasPixels();
  };

  canvas.onmousemove = function (e) {
    if (dragging) {
      const loc = windowToCanvas(e.clientX, e.clientY);
      rubberbandStretch(loc.x, loc.y);
    }
  };
  canvas.onmouseup = function () {
    rubberbandEnd();
  };
  resetButton.onclick = function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  };
};
